<template>
  <div class="page-wrap">
    <div class="page-title">cdsTestMoney 测试金弹框</div>
    <p class="page-description">测试金弹框组件，包含正是购买和测试金两种方式</p>
    <div class="page-sub-title">基本用法</div>
    <codeShow :code="code1">
      <el-button @click="openDialog">打开测试金</el-button>
      <CdsTestMoney
        :visible="dialogVisible"
        :subject_list="subject_list"
        @confirm = 'FnConfirm'
        @close="FnClose"
      ></CdsTestMoney>
    </codeShow>
    <div class="page-sub-title">cdsTestMoney API</div>
    <el-table :data="cdsTestMoneyTable" style="margin-top:20px;margin-bottom: 48px;">
        <el-table-column label="属性名" align="left" width="150" prop="attr"></el-table-column>
        <el-table-column label="说明" align="left" prop="illustrate"></el-table-column>
        <el-table-column label="类型" align="left" width="150" prop="type"></el-table-column>
        <el-table-column label="默认值" align="left" width="150" prop="default"></el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import codeShow from '../../components/code.vue'
import { CdsTestMoney } from 'cds-ui-business-components'

const code1 =  `
<CdsTestMoney
  :visible="dialogVisible"
  :subject_list="subject_list"
  @confirm = 'FnConfirm'
  @close="FnClose"
></CdsTestMoney>

// 项目列表
const subject_list = ref([
  {
    id: '1',
    name: '项目1',
    income: '200',
  },{
    id: '2',
    name: '项目2',
    income: '300',
  },{
    id: '3',
    name: '项目3',
    income: '400',
  },
])
`


const dialogVisible = ref(false)
const subject_list = ref([
  {
    id: '1',
    name: '项目1',
    income: '200',
  },{
    id: '2',
    name: '项目2',
    income: '300',
  },{
    id: '3',
    name: '项目3',
    income: '400',
  },
])

const cdsTestMoneyTable = ref([
  {
    attr: 'visible',
    illustrate: '是否显示弹框',
    type: 'Boolean',
    default: 'false',
  },
  {
    attr: 'subject_list',
    illustrate: '测试金列表，所有产品线均调用平台接口，故返回格式相同',
    type: 'Array',
    default: '[]',
  },
  {
    attr: 'confirm',
    illustrate: '确认事件',
    type: 'Function',
    default: '-',
  },
  {
    attr: 'close',
    illustrate: '弹框关闭事件',
    type: 'Function',
    default: '-',
  }
])

const openDialog = () => {
  console.log('执行')
  dialogVisible.value = true
}

const FnClose = (val) => {
  dialogVisible.value = val
}

const FnConfirm = (item, type) => {
  console.log('父组件获取参数', item, type)
}

</script>
<style scoped>

</style>